// stores/themeStore.ts - Theme management store
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface ThemeStore {
  // Current theme mode
  darkMode: boolean;

  // Toggle between dark and light mode
  toggleTheme: () => void;
  setDarkMode: (darkMode: boolean) => void;
}

export const useThemeStore = create<ThemeStore>()(
  persist(
    (set, get) => ({
      // Default to dark mode
      darkMode: true,

      // Toggle theme function
      toggleTheme: () => {
        const { darkMode } = get();
        set({ darkMode: !darkMode });

        // Update HTML class for dark mode
        if (!darkMode) {
          document.documentElement.classList.add('dark');
        } else {
          document.documentElement.classList.remove('dark');
        }
      },

      // Set theme function
      setDarkMode: (darkMode: boolean) => {
        set({ darkMode });

        // Update HTML class for dark mode
        if (darkMode) {
          document.documentElement.classList.add('dark');
        } else {
          document.documentElement.classList.remove('dark');
        }
      },
    }),
    {
      name: 'theme-storage', // localStorage key
      partialize: (state) => ({ darkMode: state.darkMode }), // Only persist darkMode
    }
  )
);